<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar bg-white">
      <view class="flex items-center">
        <uni-icons type="wifi-filled" size="28" color="#333333" class="mr-2"></uni-icons>
        <uni-icons type="battery" size="28" color="#333333"></uni-icons>
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar bg-white">
      <text class="text-lg font-medium">我的</text>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view scroll-y class="content-area">
      <!-- 用户信息卡片 -->
      <view class="user-card">
        <view class="user-info">
          <image
            src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=120&q=80"
            mode="aspectFill"
            class="avatar"
          ></image>
          <view class="info-right">
            <text class="nickname">张三</text>
            <view class="member-tag" :class="{ 'silver-tag': isMember }">
              {{ isMember ? '白银会员' : '普通用户' }}
            </view>
          </view>
          <view class="edit-profile" @tap="editProfile">
            <uni-icons type="compose" size="20" color="#FFFFFF"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 会员条幅 -->
      <view class="member-banner" v-if="isMember">
        <view class="member-info">
          <view class="member-card-icon">V</view>
          <view class="member-card-details">
            <view class="member-card-name">和光宴·会员卡</view>
            <view class="member-card-desc">已开通·永久有效</view>
          </view>
        </view>
        <view class="card-arrow">
          <uni-icons type="right" size="18" color="#ECBA5B"></uni-icons>
        </view>
      </view>
      
      <view class="member-banner non-member" v-else @tap="activateMembership">
        <view class="member-info">
          <view class="member-card-details">
            <view class="member-card-name">开通会员</view>
            <view class="member-card-desc">享专属折扣与优先服务</view>
          </view>
        </view>
        <view class="activate-btn">
          <uni-icons type="right" size="16" color="#FFFFFF"></uni-icons>
        </view>
      </view>
      
      <!-- 服务卡片 -->
      <view class="card-section">
        <view class="service-row">
          <view class="service-item" @tap="viewCoupons()">
            <view class="service-content">
              <view class="service-text">
                <view class="service-title">我的卡券</view>
                <view class="service-subtitle">优惠购 享不停</view>
              </view>
              <view class="service-icon-wrapper coupon-icon">
                <uni-icons type="wallet" size="24" color="#FFFFFF"></uni-icons>
              </view>
            </view>
          </view>
          
          <view class="service-divider"></view>
          
          <view class="service-item" @tap="viewFavorites()">
            <view class="service-content">
              <view class="service-text">
                <view class="service-title">收藏菜品</view>
                <view class="service-subtitle">最喜欢的都在这</view>
              </view>
              <view class="service-icon-wrapper favorite-icon">
                <uni-icons type="star-filled" size="24" color="#FFFFFF"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 功能列表 -->
      <view class="card-section">
        <view class="feature-list">
          <view class="feature-item" v-for="feature in features" :key="feature.id" @click="handleFeature(feature.id)">
            <view class="feature-left">
              <view class="feature-icon" :style="{ backgroundColor: feature.iconBg }">
                <uni-icons :type="feature.icon" size="20" color="#FFFFFF"></uni-icons>
              </view>
              <text class="feature-name">{{ feature.name }}</text>
            </view>
            <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 会员状态
const isMember = ref(true); // 修改为 false 可以测试非会员状态

// 功能列表数据
const features = ref([
  { id: 2, name: '联系客服', icon: 'staff', iconBg: '#FF9900' },
  { id: 3, name: '意见反馈', icon: 'compose', iconBg: '#2979FF' },
  { id: 4, name: '关于我们', icon: 'info', iconBg: '#909399' },
  { id: 5, name: '用户服务协议', icon: 'paperplane', iconBg: '#8A8A8A' }
]);

// 编辑个人资料
const editProfile = () => {
  uni.navigateTo({
    url: '/pages/mine/profile'
  });
};

// 查看优惠券
const viewCoupons = () => {
  uni.navigateTo({
    url: '/pages/mine/coupons'
  });
};

// 查看积分
const viewPoints = () => {
  uni.showToast({
    title: '查看积分',
    icon: 'none'
  });
};

// 查看收藏
const viewFavorites = () => {
  uni.navigateTo({
    url: '/pages/mine/favorites'
  });
};

// 查看特定类型服务
const viewService = (typeId: number) => {
  if (typeId === 1) {
    viewCoupons();
    return;
  }
  if (typeId === 2) {
    viewPoints();
    return;
  }
  if (typeId === 3) {
    viewFavorites();
    return;
  }
  uni.showToast({
    title: `查看类型${typeId}服务`,
    icon: 'none'
  });
};

// 处理功能点击
const handleFeature = (featureId: number) => {
  console.log('点击功能ID:', featureId);
  if (featureId === 2) { // 联系客服
    uni.navigateTo({
      url: '/pages/mine/contact'
    });
    return;
  }
  if (featureId === 3) { // 意见反馈
    uni.navigateTo({
      url: '/pages/mine/feedback'
    });
    return;
  }
  if (featureId === 4) { // 关于我们
    uni.navigateTo({
      url: '/pages/mine/about'
    });
    return;
  }
  if (featureId === 5) { // 用户服务协议
    uni.navigateTo({
      url: '/pages/mine/agreement'
    });
    return;
  }
  
  uni.showToast({
    title: `点击功能${featureId}`,
    icon: 'none'
  });
};

// 激活会员
const activateMembership = () => {
  uni.showToast({
    title: '正在开通会员',
    icon: 'none'
  });
  // 这里可以添加实际开通会员的逻辑
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.status-bar {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-bar {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 44px;
  z-index: 100;
  border-bottom: 1px solid #f0f0f0;
}

.content-area {
  flex: 1;
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.user-card,
.member-card,
.feature-list,
.service-types {
  width: 100%;
  box-sizing: border-box;
}

.user-card {
  background: linear-gradient(135deg, #3db87f, #2da06b);
  border-radius: 16rpx;
  padding: 30rpx;
  color: #ffffff;
  margin-bottom: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(61, 184, 127, 0.2);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.info-right {
  margin-left: 20rpx;
  flex: 1;
}

.nickname {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
  display: block;
}

.member-tag {
  display: inline-block;
  font-size: 22rpx;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4rpx 16rpx;
  border-radius: 100rpx;
}

.silver-tag {
  background-color: rgba(236, 186, 91, 0.3);
  color: #FFFFFF;
}

.edit-profile {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10rpx;
  background-color: rgba(vars.$primary-color, 0.3);
}

.user-stats {
  display: flex;
  justify-content: space-around;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 20rpx 0;
}

.stat-item {
  text-align: center;
  flex: 1;
  position: relative;
  
  &:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
  }
}

.stat-value {
  font-size: 32rpx;
  font-weight: 500;
  display: block;
  margin-bottom: 4rpx;
}

.stat-label {
  font-size: 22rpx;
  opacity: 0.8;
}

.card-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.header-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
}

.service-row {
  display: flex;
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx 0;
}

.service-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120rpx;
}

.service-divider {
  width: 1px;
  background-color: #EEEEEE;
  height: 80rpx;
  align-self: center;
}

.service-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  padding: 10rpx 0;
}

.service-text {
  display: flex;
  flex-direction: column;
}

.service-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 10rpx;
}

.service-subtitle {
  font-size: 22rpx;
  color: #999999;
}

.service-icon-wrapper {
  width: 72rpx;
  height: 72rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coupon-icon {
  background-color: #FF6B6B;
}

.favorite-icon {
  background-color: #FFBE3D;
}

.feature-list {
  padding: 0 20rpx;
}

.feature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 10rpx;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.feature-left {
  display: flex;
  align-items: center;
}

.feature-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.feature-name {
  font-size: 26rpx;
  color: #333333;
}

.member-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #1E1E1E, #2C2317);
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
  overflow: hidden;
}

/* 添加金色边缘效果 */
.member-banner::after {
  content: '';
  position: absolute;
  right: -50rpx;
  top: -50rpx;
  width: 100rpx;
  height: 100rpx;
  background: radial-gradient(circle, rgba(236, 186, 91, 0.6), transparent 70%);
  border-radius: 50%;
}

.member-info {
  display: flex;
  align-items: center;
}

.member-card-icon {
  width: 50rpx;
  height: 50rpx;
  background: linear-gradient(to bottom, #ECBA5B, #9E7834);
  border-radius: 8rpx;
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  color: #1E1E1E;
}

.member-card-details {
  flex: 1;
}

.member-card-name {
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 4rpx;
  color: #ECBA5B;
}

.member-card-desc {
  font-size: 22rpx;
  color: rgba(236, 186, 91, 0.8);
}

.member-date {
  font-size: 22rpx;
  color: rgba(236, 186, 91, 0.8);
}

.activate-btn {
  width: 40rpx;
  height: 40rpx;
  background: rgba(236, 186, 91, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>